<script setup>
import { ref, computed } from 'vue'
import { Image, Tag } from 'ant-design-vue'

// 定义组件props
const props = defineProps({
  role: {
    type: Object,
    required: true,
    validator: (role) => {
      return role && role.id && role.name && role.description
    }
  }
})

// 定义事件
const emit = defineEmits(['click'])

// 生成随机图片URL，基于角色ID确保一致性
const avatarUrl = computed(() => {
  if (props.role.avatar) {
    return props.role.avatar
  }
  // 使用角色ID作为随机种子，确保同一角色每次显示同样的图片
  return `https://lh.ithxs.com/apis.php?act=def&seed=${props.role.id}`
})

// 处理卡片点击
const handleCardClick = () => {
  emit('click', props.role)
}

// 处理图片加载错误的回调
const handleImageError = (error) => {
  console.warn('角色头像加载失败:', error)
}

// 图片加载状态
const imageLoading = ref(true)
const handleImageLoad = () => {
  imageLoading.value = false
}

</script>

<template>
  <div
    class="role-card"
    @click="handleCardClick"
  >
    <!-- 角色头像背景 -->
    <div class="role-avatar">
      <Image
        :src="avatarUrl"
        :alt="role.name + '的头像'"
        :preview="false"
        class="avatar-image"
        @load="handleImageLoad"
        @error="handleImageError"
        :placeholder="true"
      >
        <!-- 加载失败时的占位符 -->
        <template #placeholder>
          <div class="image-placeholder">
            <div class="placeholder-icon">🎭</div>
            <div class="placeholder-text">加载中...</div>
          </div>
        </template>
      </Image>

      <!-- 对话次数徽章 -->
      <div class="conversation-badge">
        <span class="badge-icon">💬</span>
        <span class="badge-text">{{ role.conversations || 0 }}</span>
      </div>

      <!-- 浮动文字信息 -->
      <div class="role-overlay">
        <h3 class="role-name">{{ role.name }}</h3>
        <p class="role-description">{{ role.description }}</p>
      </div>
    </div>

    <!-- 标签区域 -->
    <div v-if="role.tags && role.tags.length" class="role-footer">
      <div class="role-tags">
        <Tag
          v-for="tag in role.tags.slice(0, 3)"
          :key="tag"
          :color="getTagColor(tag)"
          class="role-tag"
        >
          {{ tag }}
        </Tag>
        <span v-if="role.tags.length > 3" class="more-tags">
          +{{ role.tags.length - 3 }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
// 为标签生成颜色的辅助函数
export default {
  methods: {
    getTagColor(tag) {
      const colors = ['blue', 'green', 'orange', 'red', 'purple', 'cyan', 'magenta']
      // 根据标签文本生成一致的颜色
      const hash = tag.split('').reduce((a, b) => {
        a = ((a << 5) - a) + b.charCodeAt(0)
        return a & a
      }, 0)
      return colors[Math.abs(hash) % colors.length]
    }
  }
}
</script>

<style lang="scss" scoped>
.role-card {
  width: 250px;
  position: relative;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  margin: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  height: 200px;
}

/* 角色头像区域 - 占满整个卡片 */
.role-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 浮动文字覆盖层 */
.role-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  color: white;
  z-index: 2;
}

.role-name {
  font-size: 13px;
  font-weight: 600;
  color: white;
  margin: 0 0 2px 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.role-description {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:deep(.ant-image) {
  width: 100%;
  height: 100%;

  .ant-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 图片占位符 */
.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #999;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.placeholder-text {
  font-size: 14px;
  color: #666;
}

/* 对话次数徽章 */
.conversation-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  backdrop-filter: blur(4px);
}

.badge-icon {
  font-size: 10px;
}

.badge-text {
  font-weight: 500;
}

/* 标签底部区域 */
.role-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 2;
}

.role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}

.role-tag {
  font-size: 9px;
  margin: 0;
  border-radius: 6px;
  padding: 1px 4px;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
}

.more-tags {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 2px;
}


</style>